<template>
    <el-dialog
        :show-close="false"
        width="60%"
        >
        <div class="confirmPopue">
            <div class="confirmPopue-title">{{title}}</div>
            <div class="confirmPopue-center">{{content}}</div>
            <div class="jt-boxii-box">
              <div class="jt-boxii">
                 <div class="wd-item">当前桌台:<span style="color: #ff6a00;">{{ tableInfo.roomName }}</span></div>
                 <div class="wd-item wdmr20">目标桌台:<span style="color: #ff6a00;">{{ currentRooName }}</span></div>
            </div>
            </div>

            <div class="popup-btn">
                <div class="btn-cancle" @click="onCancel">取消</div>
                <div class="btn-submit" @click="onConfirm">确认</div>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import ls from '@/lib/ls'

const props = defineProps({
    title: {
        type: String,
        default: '提示'
    },
    content: {
        type: String,
        default: ''
    },
    currentRooName:{
        type: String,
        default: ''
    }
});

const tableInfo = ref(ls.get('TABLE_INFO'))
const content = ref(props.content)
const title = ref(props.title)
const emits = defineEmits(['update:show', 'cancel', 'confirm']);

const onCancel = () => {
    emits('update:show');
    emits('cancel');
}

const onConfirm = () => {
    emits('confirm');
}

</script>
<style scoped lang="scss">
.confirmPopue{
  .confirmPopue-title{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
  }
  .confirmPopue-center{
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 500;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding: 40px 0 20px 0;
    .top-item{
      display: flex;
      align-items: center;
      padding: 0px 60px 20px;
      .top-item-title{
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        width: 120px;
      }
      ::v-deep(.el-select__wrapper){
        width: 40%;
      }
    }
    
  }
  .popup-btn{
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-cancle{
              text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FF6A00;
              line-height: 60px;
              width: 160px;
              height: 60px;
              background: #FFFFFF;
              border-radius: 8px;
              border: 1px solid #FF6A00;
              margin-right: 36px;
              cursor: pointer;
        }
        .btn-submit{
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 60px;
              text-align: center;
              width: 160px;
              height: 60px;
              background: #FF6A00;
              border-radius: 8px;
              cursor: pointer;
            }
  }
}
.jt-boxii-box {
  // width: 300px;
  // margin: 0 auto;
}
.jt-boxii {
  display: flex;justify-content: center;margin-bottom: 25px;
  .wd-item {
    font-size: 20px;
  }
  .wdmr20 {
    margin-left: 30px;
  }
   
}
</style>